<template>
  <div class="_wz_vehicleMaintenance" id="_wz_vehicleMaintenance">
    <Card dis-hover style="margin: 10px 0;">
      <p slot="title">保险投保记录</p>
      <wzTbale ref="wzTbale1" :tableData="tableData1"></wzTbale>
    </Card>
    <Card dis-hover style="margin: 10px 0;">
      <p slot="title">年审检验记录</p>
      <wzTbale ref="wzTbale2" :tableData="tableData2"></wzTbale>
    </Card>
    <Card dis-hover style="margin: 10px 0;">
      <p slot="title">道路营运记录</p>
      <wzTbale ref="wzTbale3" :tableData="tableData3"></wzTbale>
    </Card>
    <Card dis-hover style="margin: 10px 0;">
      <p slot="title">维修保养记录</p>
      <wzTbale ref="wzTbale4" :tableData="tableData4"></wzTbale>
    </Card>

    <Drawer :title="title" placement="left" v-model="formDetails" width="1000" :draggable="true" :mask-closable="false" :styles="{'padding':'10px 10px 10px 10px'}" :class-name="drawerClass">
      <!--      1 保险记录    2 年检记录    3 营运证记录   4 维保记录    5 过户记录-->
      <!--保险记录-->
      <InsuranceDetails v-if="formDetails&& type ==1" :selectData="formDetailsData"></InsuranceDetails>
      <!--年检详情-->
      <annualInspectionSee v-if="formDetails&& type ==2" :selectData="formDetailsData"></annualInspectionSee>
      <!--营运证记录-->
      <serviceSee v-if="formDetails&& type ==3" :selectData="formDetailsData"></serviceSee>
      <!--维保详情-->
      <maintenanceSee v-if="formDetails&& type ==4" :selectData="formDetailsData"></maintenanceSee>

    </Drawer>
  </div>
</template>
<script>

  import InsuranceDetails from '../insurance/InsuranceDetails.vue'//保险详情
  import annualInspectionSee from '../expire/annualInspectionSee.vue'//年检详情
  import serviceSee from '../expire/serviceSee.vue'//营运证详情
  import maintenanceSee from '../expire/maintenanceSee.vue'//维保详情
  import wzTbale from "../../../components/table/table";
  export default {
    components: {
      InsuranceDetails,//保险详情
      annualInspectionSee,//年检详情
      serviceSee,//营运证详情
      maintenanceSee,//维保详情
      wzTbale,//列表
    },
    props: ['selectData'],//接收来自父组件的数据
    data() {
      return {
        title: '',
        formDetailsData: {},
        formDetails: false,
        drawerClass: "_wz_drawerClass",
        type: 0,// 1 保险记录    2 年检记录    3 营运证记录   4 维保记录    5 过户记录


        tableData1: {
          url: this.apiUrl.webApi + "/management/insurance/insuranceList",//请求地址
          method: 'post',//请求方式
          where: {refVehicleTrailerUuid: this.selectData.uuid},//搜索条件
          height: 'auto',//表格高度 auto
          page: false,//分页是否使用
          columns: [//表头数据
            {type: 'index', width: 70, align: 'center', title: '序号'},
            {title: '车牌号', minWidth: 120, key: 'insuranceVehicleTrailerPlateNo'},
            {title: '车架号', minWidth: 190, key: 'insuranceVehicleTrailerFrameNo'},
            {title: '车主业户', minWidth: 120, key: 'insuranceVehicleTrailerOwnerName'},
            {title: '保险年份', minWidth: 120, key: 'insuranceYearNumber'},
            {title: '保险项目', minWidth: 300, key: 'insuranceYearItem'},
            {
              title: '操作', fixed: 'right', width: 120,
              render: (h, params) => {
                return h('span', {
                  style: {"color": "#2d8cf0", "cursor": "pointer"},
                  on: {
                    click: () => {
                      this.title = '详情';
                      this.type = 1;
                      this.formDetailsData = params.row;
                      this.formDetails = true;
                    }
                  }
                }, "查看")
              }
            },
          ],
          format: {//返回数据格式
            list: ['data'],//数据list
          },
        },
        tableData2: {
          url: this.apiUrl.webApi + "/management/annualInspect/annualInspectList",//请求地址
          method: 'post',//请求方式
          where: {refVehicleTrailerUuid: this.selectData.uuid},//搜索条件
          height: 'auto',//表格高度 auto
          page: false,//分页是否使用
          columns: [//表头数据
            {type: 'index', width: 70, align: 'center', title: '序号'},
            {title: '车牌号', minWidth: 120, key: 'annualInspectVehicleTrailerPlateNo'},
            {title: '车架号', minWidth: 190, key: 'annualInspectVehicleTrailerFrameNo'},
            {title: '车主业户', minWidth: 120, key: 'annualInspectVehicleTrailerOwnerName'},
            {title: '办理日期', minWidth: 120, key: 'annualInspectDate'},
            {
              title: '年检周期', minWidth: 120,
              render: (h, params) => {
                return h('span', params.row.annualInspectCycle + "个月");
              }
            },
            {title: '到期日期', minWidth: 120, key: 'annualInspectRemindDate'},
            {title: '登记人', minWidth: 120, key: 'annualInspectRegistrantName'},
            {
              title: '操作', fixed: 'right', width: 120,
              render: (h, params) => {
                return h('span', {
                  style: {"color": "#2d8cf0", "cursor": "pointer"},
                  on: {
                    click: () => {
                      this.title = '详情';
                      this.type = 2;
                      this.formDetailsData = params.row;
                      this.formDetails = true;
                    }
                  }
                }, "查看");
              }
            },
          ],
          format: {//返回数据格式
            list: ['data'],//数据list
          },
        },
        tableData3: {
          url: this.apiUrl.webApi + "/management/operationCertificate/operationCertificateList",//请求地址
          method: 'post',//请求方式
          where: {refVehicleTrailerUuid: this.selectData.uuid},//搜索条件
          height: 'auto',//表格高度 auto
          page: false,//分页是否使用
          columns: [//表头数据
            {type: 'index', width: 70, align: 'center', title: '序号'},
            {title: '车牌号', minWidth: 120, key: 'operationCertificateVehicleTrailerPlateNo'},
            {title: '车架号', minWidth: 190, key: 'operationCertificateVehicleTrailerFrameNo'},
            {title: '车主业户', minWidth: 120, key: 'operationCertificateVehicleTrailerOwnerName'},
            {title: '办理日期', minWidth: 120, key: 'operationCertificateCheckDate'},
            {
              title: '营运周期', minWidth: 120,
              render: (h, params) => {
                return h('span', params.row.operationCertificateCheckCycle + "个月");
              }
            },
            {title: '到期日期', minWidth: 120, key: 'operationCertificateRemindDate'},
            {title: '登记人', key: 'operationCertificateRegistrantName', minWidth: 120},
            {
              title: '操作', fixed: 'right', width: 120,
              render: (h, params) => {
                return h('span', {
                  style: {"color": "#2d8cf0", "cursor": "pointer"},
                  on: {
                    click: () => {
                      this.title = '详情';
                      this.type = 3;
                      this.formDetailsData = params.row;
                      this.formDetails = true;
                    }
                  }
                }, "查看");
              }
            },
          ],
          format: {//返回数据格式
            list: ['data'],//数据list
          },
        },
        tableData4: {
          url: this.apiUrl.webApi + "/management/maintain/maintainList",//请求地址
          method: 'post',//请求方式
          where: {refVehicleUuid: this.selectData.uuid},//搜索条件
          height: 'auto',//表格高度 auto
          page: false,//分页是否使用
          columns: [//表头数据
            {type: 'index', width: 70, align: 'center', title: '序号'},
            {title: '车牌号', minWidth: 120, key: 'maintainVehiclePlateNo'},
            {title: '车架号', minWidth: 190, key: 'maintainVehicleFrameNo'},
            {title: '车主业户', minWidth: 120, key: 'maintainVehicleOwnerName'},
            {title: '办理日期', minWidth: 120, key: 'maintainDate'},
            {
              title: '维保周期', minWidth: 120,
              render: (h, params) => {
                return h('span', params.row.maintainCycle + "天");
              }
            },
            {title: '到期日期', minWidth: 120, key: 'maintainRemindDate'},
            {title: '登记人', minWidth: 120, key: 'maintainRegistrantName'},
            {
              title: '操作', fixed: 'right', width: 120,
              render: (h, params) => {
                return h('span', {
                  style: {"color": "#2d8cf0", "cursor": "pointer"},
                  on: {
                    click: () => {
                      this.title = '详情';
                      this.type = 4;
                      this.formDetailsData = params.row;
                      this.formDetails = true;
                    }
                  }
                }, "查看");
              }
            },
          ],
          format: {//返回数据格式
            list: ['data'],//数据list
          },
        },

      }
    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态

    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态


    },
    methods: {//执行的方法

    },
    watch: {//监听

    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }
  }
</script>

<style lang="less">
  ._wz_vehicleMaintenance {
    .demo-upload-list {
      margin: 5px 0;
      display: inline-block;
      width: 200px;
      height: 140px;
      text-align: center;
      line-height: 140px;
      border-radius: 4px;
      overflow: hidden;
      background: #fff;
      position: relative;
      border: 1px solid rgba(0, 0, 0, .2);
      margin-right: 4px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .demo-upload-list-cover {
      display: none;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, .6);

      i {
        color: #fff;
        font-size: 40px;
        cursor: pointer;
        margin: 0 2px;
      }
    }

    .demo-upload-list:hover .demo-upload-list-cover {
      display: block;
    }
  }

  .subCol > ul > li {
    margin: 0 -18px;
    list-style: none;
    padding: 9px 18px;
    min-height: 48px;
    border-bottom: 1px solid #e8eaec;
    display: flex;
    align-items: center;
    height: 40px;
    overflow: hidden;
  }

  .subCol > ul > li:last-child {
    border-bottom: none
  }

  ._wz_drawerClass {


    .demo-upload-list {
      margin: auto;
      display: block;
      width: 100%;
      height: 132px;
      text-align: center;
      line-height: 60px;
      border: 1px solid transparent;
      border-radius: 4px;
      overflow: hidden;
      background: #fff;
      position: relative;
      box-shadow: 0 1px 1px rgba(0, 0, 0, .2);

      img {
        width: 100%;
        height: 100%;
      }

      .demo-upload-list-cover {
        align-items: center;
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, .6);

        i {
          margin: auto;
          color: #fff;
          font-size: 40px;
          cursor: pointer;
        }
      }
    }


    .demo-upload-list:hover .demo-upload-list-cover {
      display: flex;
    }


    ._wz_transferOwnership_formAdd {
      .demo-upload-list {
        display: inline-block;
        width: 200px;
        height: 140px;
        text-align: center;
        line-height: 140px;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        border: 1px solid rgba(0, 0, 0, .2);
        margin-right: 4px;

        img {
          width: 100%;
          height: 100%;
        }

        .demo-upload-list-cover {
          display: none;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          background: rgba(0, 0, 0, .6);

          i {
            color: #fff;
            font-size: 40px;
            cursor: pointer;
            margin: 0 2px;
          }
        }
      }


      .demo-upload-list:hover .demo-upload-list-cover {
        display: block;
      }

    }
  }
</style>
